<template>
  <el-drawer v-model="showDrawer" :title="title" :size="size" :close-on-click-modal="false"
  :destroy-on-close="destroyOnClose">
   <div class="formDrawer">
        <div class="body"> 
          <slot></slot>
        </div>
        <div class="btn">
          <el-button type="primary" :loading="loading"
          @click="submit"
          >{{ confirmText }}</el-button>
          <el-button type="default" :loading="loading" @click="close">取消</el-button> </div>
   </div>

  </el-drawer>
</template>
<script setup>
import { ref } from 'vue';

const showDrawer=ref(false)
const emit =defineEmits(['submit'])

const props=defineProps({
  title:String,
  size:{
    type:String,
    default:'45%'
 },
 destroyOnClose:{
  type:Boolean,
  default:false
 },
 confirmText:{
  type:String,
  default:"提交"
 }

})
const loading=ref(false)
const showLoading =()=>{loading.value=true; console.log(11111)};
const closeLoading =()=>loading.value=false
// 打开
const open =()=>showDrawer.value=true
// 关闭
const close=()=>showDrawer.value=false
// 提交
const submit =()=>emit('submit')


// 向父组件暴露方法
defineExpose({
    open,
    close,
    showLoading,
    closeLoading

})





</script>
<style lang="scss" scoped>
.formDrawer{
  width: 100%;
  height: 100%;
  position: relative;
  @apply flex flex-col;
  >.body{
    flex: 1;
    overflow-y: auto;
  }
  .btn{
    height:50px;
    @apply mt-auto flex items-center;
  }
}
</style>